export default {
  data () {
    return {
      rolesData: [{ roleName: '主管', roleDesc: '技术负责人' }],
      // 是否显示分配 权限对话框
      dialogAssignRightsVisible: false,
      // 树的数据
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      // 树组件的配置项
      defaultProps: {
        // children : 负责显示结构
        // label : 负责显示标题
        children: 'children',
        label: 'authName'
        //  label: 'label1'
        // 读取 data 里的数据字段 label1 显示标题
      },
      // 当前 角色的id
      roleId: 0
    }
  },
  created () {
    this.loadRolesData()
    this.loadRightsData()
  },
  methods: {
    async loadRolesData () {
      let res = await this.$axios.get('roles')
      console.log(res)
      this.rolesData = res.data.data
    },
    // 处理索引
    indexMethod (index) {
      return index
    },
    // 获取所有的权限信息
    async loadRightsData () {
      let res = await this.$axios.get('rights/tree')
      console.log(res)
      this.data = res.data.data
    },
    // 显示权限信息对话框
    showAssignRightsDialog (row) {
      // 0. 获取row的id 保存起来
      this.roleId = row.id

      // 1. 负责显示
      this.dialogAssignRightsVisible = true

      // 1.5 获取 row 里面的第三层权限信息的id
      let keys = []
      row.children.forEach(item1 => {
        item1.children.forEach(item2 => {
          item2.children.forEach(item3 => {
            keys.push(item3.id)
          })
        })
      })

      console.log(keys)

      // 2. id:105 添加商品 第三层的
      // Cannot read property 'setCheckedKeys' of undefined
      // this.$refs.tree.setCheckedKeys([105])
      // nextTick DOM渲染完之后,自动执行我们的回调
      this.$nextTick(() => {
        // console.log(this.$refs.tree)
        // this.$refs.tree.setCheckedKeys([105])
        this.$refs.tree.setCheckedKeys(keys)
      })
    },
    // 分配权限
    async assignRights () {
      // 1. 通过官网提供给我们的获取全选和半选的方法获取key(id)
      let keys1 = this.$refs.tree.getCheckedKeys() // 全选
      let keys2 = this.$refs.tree.getHalfCheckedKeys() // 半选
      console.log(keys2)
      let keys = keys1.concat(keys2)

      // [1,4,7]  => '1,4,7'

      // roleId 当前角色的id
      // rids 要给角色授权的权限信息id
      let res = await this.$axios.post(`roles/${this.roleId}/rights`, {
        rids: keys.join(',')
      })
      console.log(res)
      if (res.data.meta.status === 200) {
        // 对话框关闭
        this.dialogAssignRightsVisible = false
        // 提示
        this.$message({
          message: '角色授权成功',
          type: 'success',
          duration: 800
        })
        // 刷新页面
        this.loadRolesData()
      }
    }
  }
}
